<template>
	<view class="box">
		<view class='carText'>车辆名称</view>
		<view class="carName">{{orderInfo.carNo}}</view>
		<view class="carBox-img">
			<image class="carImg" :src="orderInfo.url | mmvImageUrl" mode="aspectFill"></image>
		</view>
		<view class='operate'>
			<view class='operate-child' v-if="electric>=20 && batteryLevel">
				<image class="carImg" src="../../static/pay/icon_electric_on.png"></image>
				<text v-if="batteryType=='1'">
					电量:{{batteryLevel}} %
				</text>
				<text v-if="batteryType=='0'">
					电量:{{batteryLevel}} 千瓦
				</text>
				
			</view>
			<view class='operate-child' v-if="electric<20 && batteryLevel">
				<image class="carImg" src="../../static/pay/icon_electric_off.png"></image>
				<text v-if="batteryType=='1'">
					电量:{{batteryLevel}} %
				</text>
				<text v-if="batteryType=='0'">
					电量:{{batteryLevel}} 千瓦
				</text>
			</view>
			<view class='operate-child' v-if='fuelType !==null'>
				<image class="carImg" src="../../static/pay/icon_oil_on.png"></image>
				<text v-if="fuelType=='1'">
					油量:{{electric}} % 
				</text>
				<text v-if="fuelType=='0'">
					油量:{{electric}} 升 
				</text>
			</view>
			<view class='operate-child' @click="goNavi">
				<image class="carImg" src="../../static/pay/icon_location_on.png"></image>
				<text>
					位置
				</text>	
			</view>
			
		</view>
		<view class='lock-box'>
			<view class='lock-box-child'>
				<view class='img-box' @click=operateCar(0)>
					<image class="carImg" v-if='lockStatus' src="../../static/pay/icon_unlocking_on.png"></image>
					<image class="carImg" v-else src="../../static/pay/icon_unlocking_on.png"></image>
					</view>
				<view>开锁</view>
			</view>
			<view class="vertical-bar"></view>
			<view class='lock-box-child'>
				<view class='img-box' @click=operateCar(1)>
					<image class="carImg" v-if='onlockStatus' src="../../static/pay/icon_trunk_on.png"></image>
					<image class="carImg" v-else src="../../static/pay/icon_lock_off.png"></image>
					</view>
				<view>上锁</view>
			</view>
			<view class="vertical-bar"></view>
			<view class='lock-box-child'>
				<view class='img-box' @click=operateCar(2)>
				<image class="carImg" v-if='onTrunkStatus' src="../../static/pay/icon_trunk_ona.png"></image>
				<image class="carImg" v-else src="../../static/pay/icon_trunk_off.png"></image>
				</view>
				<view>开后备箱</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { constant } from 'lodash';
	import {
		orderShortInfo,
		carOilQuantity,
		vehiclekeyCommand,
		getCarOilQuantity,
		getCarLoation
	} from '@/api/order-api.js';
	import srUpload from '@/components/upload/sr-upload.vue';
	import settings from '@/settings.js'
	export default {
		components: {
			srUpload
		},
		data() {
			return {
				batteryLevel:null,
				batteryType:null,
				fuelType:null,
				electric:null,
				signImage:'',
				orderInfo: {
					
				},
				accessoryItems: [],
				fuelCapacity:0,
				lockStatus:true,
				onlockStatus:true,
				onTrunkStatus:true,
				storeInfo:{
					lat:'',
					lon:'',
					storeName:'',
					addrDetail:'',
				},
				deviceNo:''
			};
		},
		computed: {
		
		},
		onLoad(op) {
			this.orderNo = op.orderNo;
			this.type = op.type;
			this.getOrderDetail();
			
		},
		methods: {
			//获取设备
			getCarCommand(){
				getCarOilQuantity(this.orderInfo.carId).then((res)=>{
					if(res.data){
						this.deviceNo = res.data.deviceNo
						// this.getCarLoaction()
					}
				})
				
			},
			// 获取车辆定位信息
			getCarLoaction(){
				getCarLoation(this.deviceNo).then((res)=>{
					if(res.data){
						this.storeInfo = res.data
					}
					
				})
			},
			goNavi() {
				console.log(this.storeInfo,'this.storeInfothis.storeInfo')
			   uni.openLocation({ //​使用微信内置地图查看位置。
				latitude: Number(this.storeInfo.lat), 
				longitude: Number(this.storeInfo.lon),
				address: this.storeInfo.addrDetail,
				success() {
					console.log('成功了');
				},
				fail(msg) {
					console.log(msg);
				}
			   })
			},
			operateCar(type){
				if(this.deviceNo){
					vehiclekeyCommand({deviceNo:this.deviceNo,instId:type}).then((res)=>{
						console.log(res,111111111)
							if(type==0){
								this.lockStatus = false
								setTimeout(()=>{
									this.lockStatus = true
								},2000)
							}else if(type==1){
								this.onlockStatus = false
								setTimeout(()=>{
									this.onlockStatus = true
								},2000)
							}else if(type==2){
								this.onTrunkStatus = false
								setTimeout(()=>{
									this.onTrunkStatus = true
								},2000)
							}
							uni.$u.toast(res.msg)
					})
				}
			},
			carOilQuantity(){
				carOilQuantity(this.orderInfo.carId).then((res)=>{
					if(res.data){
						this.electric = res.data.fuelLevel
						this.storeInfo = res.data
						this.fuelType = res.data.fuelType
						this.batteryLevel = res.data.batteryLevel
						this.batteryType = res.daya.batteryType
					}	
				})
			},

			// 获取车辆信息
			getOrderDetail() {
				uni.showLoading({
					title: '加载中...'
				});
				orderShortInfo({
					type: this.type,
					orderNo: this.orderNo,
					lat: this.$store.state.user.lat,
					lon: this.$store.state.user.lng
				}).then(res => {
					uni.hideLoading();
					this.orderInfo = res.data;
					if(res.data.carId){
						this.carOilQuantity()
						this.getCarCommand()
					}
					
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/style/helang-table.scss';
	.box{
		width: 100%;
		  background: linear-gradient(to bottom, #D9E2EF, #F5F5F5 );
		  padding-top:20px;
		  .carText{
			  font-size: 16px;
			  font-weight: 600;
			  margin-left:20px;
			  margin-bottom: 10px;
			  color:#333333 
		  }
			  
		  .carName{
			  width:90px;
			  text-align: center;
			  border: 1px solid #95CAFF;
			  color: #333333;
			  padding:3px;
			  margin-left:20px;
			  margin-bottom: 25px;
			  font-size: 14px;
		  };
		  .carBox-img{
			  width: 100%;
			  display: flex;
			  justify-content: center;
			  margin-bottom: 40px;
			  .carImg{
				  margin: 0 auto;
				  width:90%;
				  height: 220px;
				  border-radius: 5px;
			  }
		  }
		  .operate{
			  display: flex;
			  justify-content: space-between;
			  padding: 0 20px;
			  .operate-child{
				  display: flex;
				  align-items: center;
				  padding:5px 10px;
				  background-color: #ffffff;
				  border-radius: 2px;
				  .carImg{
					  display: inline-block;
					  width: 20px;
					  height: 20px;
					  margin-right: 5px;
					  
				  }
			  }
		  }
		  .lock-box{
			  width:90%;
			  margin: 20px auto;
			  background-color: #ffffff;
			  border-radius: 5px;
			  display: flex;
			  justify-content: space-around;
			  .lock-box-child{
				  width: 30%;
				  height:90px ;
				  display: flex;
				  flex-direction: column;
				  justify-content: center;
				  align-items: center;
				  margin-bottom: 10px;
				  .img-box{
					  width: 40px;
					  height: 40px;
					  border-radius: 20px;
					  display: flex;
					  justify-content: center;
					  align-items: center;
					  border: 1px solid rgba(0,26,64, 0.1);
					  margin-bottom: 8px;
					  .carImg{
						  display: inline-block;
						  width: 30px;
						  height: 30px;
					  					  
					  }
					  
				  }
			  }
			  .vertical-bar{
				  height: 75px;
				  width: 2px;
				  background-color:#E6E7E9  ;
				  margin-top:8px
			  }
		  }
	}
	
</style>